import { withRouter } from 'react-router';
import { Component } from 'refast';
import * as logic from './logic';
import './PageXytx.less';
import Grid from 'uxcore-grid';
import {Row, Col} from 'uxcore-grid';
import Table from 'uxcore-table';
import ReactEcharts from 'echarts-for-react';
import Tooltip from 'uxcore-tooltip';
import Tabs  from 'uxcore-tabs';
import Dialog from 'uxcore-dialog';
import Steps, { Step } from 'uxcore-steps';
import EmptyData from 'uxcore-empty-data';

import { NO_DATA_HYPHEN } from '../../common/constants';

class PageXytx extends Component {

  constructor(props) {
    super(props, logic);
    this.okModal = this.okModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
  }

  onMxClick(rowData, lx) {
    this.dispatch(['viewMx', 'showModal'], rowData, lx);
  }

  okModal() {
    this.dispatch('hideModal');
  }

  hideModal() {
    this.dispatch('hideModal');
  }

  componentWillMount() {
    this.dispatch('initColoums',
      [
        {dataKey: 'zsmc', title: '资质证书名称', width: 266, ordered: false},
        {
          dataKey: 'action', title: '证书号', width: 160, type: "action", actions: [
          {
            render: (title, rowData) => { // 定制渲染
              return rowData.zsbh
            },
            callback: (rowData) => {
              this.onMxClick(rowData, 'zzmx')
            },
          }]
        }]);
  }

  componentDidMount() {
    this.dispatch('timeline', this.props.params);
    this.dispatch(['jbxx', 'ryxx', 'zzxx', 'cxfxx', 'zjxmxx', 'yjxmxx'], this.props.params);
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  render() {

    const steps = this.state.steps.map(function (s, i) {
      return (
        <Step key={i} title={ <div style={{textAlign:'left'}}>{s.time}</div>}
              description={<div style={{textAlign:'left'}}>{s.title + s.content}</div>}/>
      );
    });

    return (
      <div className="page-xytx">
        <Grid fluid={true}>
          <Row className="show-grid">
            <Col xs={24} md={9}>
              <div className="col_1" style={{height:309}}>
                <div className="title title_1">企业基本信息</div>
                <div className="qy_ms">
                  <div className="col-md-8 qy_ms_lable qy_title_lable">
                    <div>企业名称</div>
                    <div>组织机构代码</div>
                    <div>企业类别</div>
                    <div>企业性质</div>
                    <div>资质类型</div>
                    <div>详细地址</div>
                    <div>电话</div>
                    <div>固定联系人</div>
                    <div>固定联系电话</div>
                  </div>
                  <div className="col-md-16">
                    <div><Tooltip placement="right" overlay={
                      <div className="pop_ms">
                          <span>{this.state.org.name ? this.state.org.name : NO_DATA_HYPHEN}</span>
                        </div>
                      }>
                      <div className="fn-text-overflow">
                        {this.state.org.name ? this.state.org.name : NO_DATA_HYPHEN}
                      </div>
                    </Tooltip></div>
                    <div>{this.state.org.jgdm ? this.state.org.jgdm : NO_DATA_HYPHEN} </div>
                    <div>{this.state.org.qylb ? this.state.org.qylb : NO_DATA_HYPHEN}</div>
                    <div>{this.state.org.qyxz ? this.state.org.qyxz : NO_DATA_HYPHEN}</div>
                    <div>{this.state.org.zzlx ? this.state.org.zzlx : NO_DATA_HYPHEN}</div>
                    <div><Tooltip placement="right" overlay={
                      <div className="pop_ms">
                          <span>{this.state.org.qydj ? this.state.org.qydj : NO_DATA_HYPHEN}</span>
                        </div>
                      }>
                      <div className="fn-text-overflow">
                        {this.state.org.qydj ? this.state.org.qydj : NO_DATA_HYPHEN}
                      </div>
                    </Tooltip></div>
                    <div>{this.state.org.dh ? this.state.org.dh : NO_DATA_HYPHEN}</div>
                    <div>{this.state.org.gdlxr ? this.state.org.gdlxr : NO_DATA_HYPHEN}</div>
                    <div>{this.state.org.gdlxdh ? this.state.org.gdlxdh : NO_DATA_HYPHEN}</div>
                  </div>
                </div>
              </div>
            </Col>
            <Col xs={24} md={15}>
              <Tabs defaultActiveKey="0" type="small">
                <Tabs.TabPane tab="时间轴" key="0">
                  <div className="col_1" style={{height:268, overflow: 'auto'}}>
                    <div className="col-md-24"
                         style={{marginTop:'20px',marginBottom:'-20px'}}>
                      { this.state.steps.length > 0 ?
                        <Steps type="title-on-top" maxDescriptionWidth="500" direction="vertical" showIcon={false}
                               current={this.state.steps.length}>{steps}</Steps>
                        : <EmptyData />
                      }
                    </div>
                  </div>
                </Tabs.TabPane>
                <Tabs.TabPane tab="企业诚信" key="1">
                  <div className="col_1" style={{height:268}}>
                    <div className="xytx_table_div col-md-24">
                      <Table {...this.state.cxfProps} ref="cxfgrid"/>
                    </div>
                  </div>
                </Tabs.TabPane>
                <Tabs.TabPane tab="在建工程信息" key="2">
                  <div className="col_1" style={{height:268}}>
                    <div className="xytx_table_div col-md-24">
                      <Table {...this.state.zjxmProps} ref="zjxmgrid"/>
                    </div>
                  </div>
                </Tabs.TabPane>
                <Tabs.TabPane tab="历史业绩信息" key="3">
                  <div className="col_1" style={{height:268}}>
                    <div className="xytx_table_div col-md-24">
                      <Table {...this.state.yjxmProps} ref="lsyjgrid"/>
                    </div>
                  </div>
                </Tabs.TabPane>
              </Tabs>
            </Col>
          </Row>
          <Row className="show-grid">
            <Col xs={24} md={12}>
              <div className="col_1" style={{height:304}}>
                <div className="title title_4">企业人员信息</div>
                <div className="xytx_table_div col-md-24">
                  <Table {...this.state.ryProps} ref="rygrid"/>
                </div>
                {/*<ReactEcharts*/}
                  {/*option={this.state.pctjProps}*/}
                  {/*style={{height: 300}}*/}
                {/*/>*/}
              </div>
            </Col>
            <Col xs={24} md={12}>
              <div className="col_1" style={{height:304}}>
                <div className="title title_6">企业资质基本信息</div>
                <div className="xytx_table_div col-md-24">
                  <Table {...this.state.zzProps} ref="zzgrid"/>
                </div>
              </div>
            </Col>
          </Row>
        </Grid>
        <Dialog title={this.state.dialogTitle} width="1050"
                onCancel={this.hideModal}
                onOk={this.okModal}
                visible={this.state.showDialog}
                transitionName="slideDown">
          {this.state.showDialogLx}
        </Dialog>
      </div>
    );
  }
}

export default withRouter(PageXytx);
